<template>
    <div class="corn">
        <div class="router" @click="toCensus">查看统计 >></div>
        <div class="header">
            <img src="@/images/corn/header.png" alt="">
            <div class="time">
                <div class="icon"><img src="@/images/corn/clock.png" alt=""></div>
                <div class="text">{{ `${state.day} ${state.week} ${state.time}` }}</div>
            </div>
            <div class="title">
                — 玉米长势监测平台 —
            </div>
            <div class="tip1">省：</div>
            <div class="tip2">市：</div>
            <div class="select1">吉林省</div>
            <div class="select2">长春省</div>
        </div>
        <div class="contents">
            <div class="left">
                <div class="module module1">
                    <div class="title">
                        <div class="text">监测作物种类</div>
                    </div>
                    <div class="content">
                        <echartsBox :option="state.leftTop"></echartsBox>
                    </div>
                </div>
                <div class="module module2">
                    <div class="title">
                        <div class="text">植被指数反演</div>
                    </div>
                    <div class="content">
                        <echartsBox :option="state.leftCenter"></echartsBox>
                    </div>
                </div>
                <div class="module module3">
                    <div class="content">
                        <echartsBox :option="state.leftBottom"></echartsBox>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="c-top">
                    <div class="c-top-item" v-for="(v, k) in 6" :key="k">
                        <el-select v-model="state.select1">
                            <el-option value='1' label="物候气象条件"></el-option>
                            <el-option value='1' label="物候气象条件"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="c-center">
                    <div class="box">
                        <img src="@/images/corn/center.png" alt="">
                    </div>
                </div>
                <div class="c-bottom">
                    <div class="box">
                        <div class="title">
                            <div class="text">产值估算</div>
                        </div>
                        <div class="content">
                            <div class="c-b-left">
                                <echarts-box :option="state.centerLeft"></echarts-box>
                            </div>
                            <div class="c-b-right">
                                <echarts-box :option="state.centerRight"></echarts-box>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="module module1">
                    <div class="title">
                        <div class="text">环境信息</div>
                    </div>
                    <div class="content">
                        <div class="right-top">
                            <tableList style="height:80%" :rows="state.rightTop.tableRows"
                                :columns="state.rightTop.tableColumns" :headerStyle="{ background: '#173c61' }">
                            </tableList>
                        </div>
                    </div>
                </div>
                <div class="module module2">
                    <div class="title">
                        <div class="text">全氮反演</div>
                    </div>
                    <div class="content">
                        <div class="top">
                            <List :data="state.rightBottom1" :height="'150px'" :showNumber="4" :speed="2000" width="100%"
                                class="renderBox">
                                <template v-slot:itemCon="{ item }" style="width:100%">
                                    <div class="list-box">
                                        <div class="list-title">
                                            <div class="list-title-left">{{ item.name }}</div>
                                            <div class="list-title-right">{{ item.num }}</div>
                                        </div>
                                        <div class="list-infos">
                                            <div class="list-infos-item"></div>
                                            <div class="list-infos-value" :style="{ width: `${item.value}%` }"></div>
                                        </div>
                                    </div>
                                </template>
                            </List>
                        </div>
                        <div class="bottom">
                            <echarts-box :option="state.rightBottom2"></echarts-box>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import moment from 'moment'
import echartsBox from '@/components/echarts-box.vue'
import tableList from '@/components/table.vue'
import List from '@/components/list.vue'
import { onMounted, reactive } from 'vue-demi'
import { leftTop, leftCenter, leftBottom, rightTop, rightBottom1, rightBottom2, centerLeft, centerRight } from './indexData'
import { useRouter } from 'vue-router'
const state = reactive({
    time: '',
    day: '',
    week: '',
    leftTop,
    leftCenter,
    leftBottom,
    rightTop,
    rightBottom1,
    rightBottom2,
    centerLeft,
    centerRight,
    select1: '1'
})
const getWeek = (number) => {
    switch (number) {
        case 1:
            return '星期一';
        case 2:
            return '星期二';
        case 3:
            return '星期三';
        case 4:
            return '星期四';
        case 5:
            return '星期五';
        case 6:
            return '星期六';
        case 7:
            return '星期日';
    }
}
const getTime = () => {
    state.day = moment().format('YYYY-MM-DD')
    state.time = moment().format('HH:mm')
    state.week = getWeek(moment().isoWeekday())
}
onMounted(() => {
    getTime()
    setInterval(() => {
        getTime()
    }, 60000)
})
const router = useRouter()
const toCensus = () => {
    router.push('/corn-plane')
}
</script>
<style lang="scss">
.corn {
    .el-select {
        border: 0px !important;
        border-radius: 0 !important;
        background: #003157 !important;

        .el-input__wrapper {
            background: #003157 !important;
            padding: 4px 8px !important;
            box-shadow: unset !important;
        }

        .el-input__inner {
            background: #003157 !important;
            color: #fff !important;
            text-align: center !important;
        }
    }
}
</style>
<style lang="scss" scoped>
.title {
    background: url(@/images/corn/title.png) no-repeat;
    background-size: 100% 100%;
    height: 50px;
    position: relative;
    width: 337px;

    .text {
        font-size: 18px;
        position: absolute;
        left: 30%;
        top: 50%;
        transform: translateY(-60%);
    }
}

.corn {
    width: 100vw;
    height: 100vh;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #000;

    .header {
        position: relative;
        margin-bottom: -3%;

        img {
            width: 100%;
            object-fit: contain;
        }

        .time {
            position: absolute;
            left: 3%;
            top: 25%;
            display: flex;
            align-items: center;
            color: #2EB8FF;
            font-size: 14px;

            .icon {
                margin-right: 10px;
                display: flex;
                align-items: center;

                img {
                    width: 14px;
                    object-fit: contain;
                }
            }
        }

        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 15%;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            text-shadow: 2px 5px 0px rgba(0, 0, 255, 0.52);
            // background: linear-gradient(0deg,#fff 0%, #AFC6F5 90%);
            // -webkit-background-clip: text;
            display: flex;
            align-items: center;
            // -webkit-text-fill-color: transparent;
        }

        .tip1 {
            position: absolute;
            right: 23%;
            top: 28%;
            font-size: 20px;
        }

        .tip2 {
            position: absolute;
            right: 10%;
            top: 28%;
            font-size: 20px;
        }

        .select1 {
            position: absolute;
            right: 18%;
            top: 28%;
            font-size: 20px;
        }

        .select2 {
            position: absolute;
            right: 5%;
            top: 28%;
            font-size: 20px;
        }
    }

    .router {
        cursor: pointer;
        position: absolute;
        left: 20%;
        top: 3%;
        z-index: 999;
        color: #2EB8FF;
    }

    .contents {
        padding: 0 20px 20px;
        // margin-top: -20px;
        position: relative;
        // top: -60px;
        flex: 1;
        display: flex;
        overflow: hidden;

        .left {
            height: 100%;
            width: 360px;
            display: flex;
            flex-direction: column;

            .module {
                // height: 31.1%;
                flex: 1;

                display: flex;
                flex-direction: column;
                margin-top: 10px;

                .content {
                    position: relative;
                    flex: 1;
                    height: calc(100% - 90px);
                    background: url(@/images/corn/box.png) no-repeat;
                    background-size: 100% 100%;
                    padding: 20px;
                }
            }

            .module1 {
                // flex:0;
                height: 200px;
            }

            .module3 {
                .content {
                    flex: 1;
                }
            }
        }

        .right {
            height: 100%;
            width: 360px;
            display: flex;
            flex-direction: column;

            .content {
                background: url(@/images/corn/box.png) no-repeat;
                background-size: 100% 100%;
                padding: 20px;

                .right-top {
                    padding: 4px;
                }
            }

            .module {
                display: flex;
                flex-direction: column;
                ;
            }

            .module1 {
                height: 50%;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                .content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                }
            }

            .module2 {
                flex: 1;

                .content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .top {
                        height: 50%;

                        .list-box {
                            width: 100%;

                            .list-title {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                font-size: 12px;
                            }

                            .list-infos {
                                width: 100%;
                                position: relative;

                                .list-infos-item {
                                    height: 10px;
                                    width: 100%;
                                    background: rgba(180, 215, 243, 0.3);
                                }

                                .list-infos-value {
                                    height: 10px;
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    background: #2FC6DC;
                                }
                            }
                        }
                    }

                    .bottom {
                        height: 200px;
                    }
                }
            }
        }

        .center {
            flex: 1;
            margin: 0 20px;
            display: flex;
            height: 100%;
            flex-direction: column;

            .c-top {
                display: flex;
                justify-content: space-between;
            }

            .c-center {
                margin: 10px 0;
                height: 56%;
                ;

                .box {
                    height: 100%;
                    background: url(@/images/corn/box.png) no-repeat;
                    background-size: 100% 100%;
                    padding: 4px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .c-bottom {
                flex: 1;

                .box {
                    height: 100%;
                    ;
                    background: url(@/images/corn/box.png) no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;

                    .title {
                        background: url(@/images/corn/title2.png) no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                        width: 50%;
                        position: relative;
                        margin: 0 auto 20px;

                        .text {
                            font-size: 24px;
                            font-weight: 600;
                            position: absolute;
                            left: 48%;
                            transform: translateX(-50%);
                            top: 25%;
                        }
                    }

                    .content {
                        flex: 1;
                        display: flex;

                        >div {
                            flex: 1;
                            height: 250px;
                        }

                        .c-b-left {
                            margin-right: 20px;
                        }
                    }
                }
            }
        }

    }
}
</style>